<template>
    <div class="upload-question">
        <el-dialog v-model="dialogVisible" class="review-dialog" width="615" :show-close="false"
            :close-on-click-modal="false" :close-on-press-escape="false">
            <div class="header">
                <div class="title">任务详情</div>
                <div class="header-right">
                    <div class="tips">tips:关闭页面可在主页的任务中心查看</div>
                    <div class="close" @click="close">
                        <i class="iconfont icon-chahao1 close-dialog"></i>
                    </div>
                </div>
            </div>
            <div class="content">
                <adminTaskItem v-for="(item, index) in idList" :key="index" :taskId="item" @lookTask="lookTask"
                    ref="adminTask">
                </adminTaskItem>
            </div>
        </el-dialog>
        <taskDialog ref="taskDia"></taskDialog>
    </div>
</template>
<script setup>
import { ref, onMounted, watch, computed, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import adminTaskItem from "./adminTaskItem.vue";
import taskDialog from "@/components/ojComponents/taskItem/taskDialog.vue";

const dialogVisible = ref(false);
const taskDia = ref(null)
const idList = ref([])
const adminTask = ref(null)
const open = (data = null) => {
    dialogVisible.value = true;
    if (data) {
        idList.value = data
    }
};

const close = () => {
    dialogVisible.value = false;
    idList.value = []
    if (adminTask.value && adminTask.value.length > 0) {
        adminTask.value.map(item => item.stopInterval())
    }

};
const lookTask = (data) => {
    taskDia.value.open(data)
}

defineExpose({
    open,
});
</script>
<style lang="less" scoped>
.upload-question {
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        .title {
            line-height: 33px;
            font-weight: 700;
            font-size: 24px;
            color: #222;
        }

        .header-right {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 4px;

            .close {
                margin-left: 10px;

                .close-dialog {
                    cursor: pointer;
                    font-size: 34px;
                    color: #8c8c8c;
                    transition: all 0.3s ease-in-out;

                    &:hover {
                        color: #8c8c8cbd;
                    }
                }
            }
        }

    }

    .content {
        height: 290px;
        overflow: auto;
        scrollbar-width: none;
        /* firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
        overflow-x: hidden;
        overflow-y: auto;

        &::-webkit-scrollbar {
            display: none;
            /* Chrome Safari */
        }
    }
}

::v-deep(.review-dialog) {
    height: 400px;
}
</style>
